//客运量
let transportNumM =[200, 382, 102, 267, 186]
let transportNumY =[2000, 3082, 3102, 2267, 3186]
//客运增长率=
let transportRateM =[3, 8, 5, 9, 4]
let transportRateY =[3, 8, 5, 9, 4]
function buildChart1() {
  var myChart = echarts.init(document.getElementById('yearPassenger'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['客运数量' ,'环比增长率'],
      right:"10%",
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: ['2015', '2016', '2017', '2018', '2019' ],
    }],
    yAxis: [
      {
        name:'(万人)',
        nameTextStyle:{
          color:"#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '客运数量',
        type: 'bar',
        barWidth: 12,

        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(98,145,242)'
            },
              {
                offset: 1,
                color: 'rgb(10,41,190)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data: transportNumY
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0,  0,1, [{
              offset: 0,
              color: 'rgba(13,241,222,0.6)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          }
        },
        itemStyle: {
          color: "#407FFF"
        },

        data: transportRateY
      }
    ]
  };
  myChart.setOption(option);
}
function buildChart2() {
  var myChart = echarts.init(document.getElementById('monthlyPassenger'));
  option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '20%',
      left: '0',
      right: '0',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ['客运数量' ,'环比增长率'],
      right:"10%",
      textStyle: {
        color: '#fff',
      },
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#999'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: ['05', '06', '07', '08', '09' ],
    }],
    yAxis: [
      {
        name:'(万人)',
        nameTextStyle:{
          color:"#ccc"
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999'
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#d1e6eb',

          },
          formatter: '{value} %',
          textStyle: {
            color: '#fff',
            fontSize: 12, //坐标值得具体的颜色
          }
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '客运数量',
        type: 'bar',
        barWidth: 12,
        tooltip: {
          show: false
        },
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff',
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color:  'rgb(47,230,252)'
            },
              {
                offset: 1,
                color:'rgb(40,97,214)'
              }
            ], false),
            // color: function(params) {
            //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
            //     return colorList[params.dataIndex];
            // }
          }
        },
        data:transportNumM
      },
      {
        name: '环比增长率',
        type: 'line',
        yAxisIndex: 1,
        // smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbol: 'none',
        smooth: true,
        symbolSize: 5,
        showSymbol: false,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: ' rgba(13,241,222,0.50196)'
            }, {
              offset: 0.3,
              color: 'rgba(13,241,222,0.10196)'
            }, {
              offset: 1,
              color: 'rgba(13,241,222,0)'
            }], false),
          },
        },
        itemStyle: {
          color: "rgba(13,241,222,0.50196)"
        },

        data: transportRateM
      }
    ]
  };
  myChart.setOption(option);
}
buildChart2()
buildChart1()
$('#highway_y').click(function () {
  transportNumY =[2000, 3082, 3102, 2267, 3186]
  transportRateY =[3, 8, 5, 9, 4]
  buildChart1()
})
$('#railway_y').click(function () {
  transportNumY =[3020, 3102, 3202, 3207, 3186]
  transportRateY =[3, 2, 2, 6, 8]
  buildChart1()
})
$('#highSpeedRail_y').click(function () {
  transportNumY =[3203, 3042, 3402, 3267, 3286]
  transportRateY =[1, 8, 3, 9, 4]
  buildChart1()
})
$('#airporty_y').click(function () {
  transportNumY =[2350, 3102, 3402, 3297, 3286]
  transportRateY =[3, 4, 2, 7, 5]
  buildChart1()
})
$('#highway_m').click(function () {
  transportNumM =[200, 382, 102, 267, 186]
  transportRateM =[3, 8, 5, 9, 4]
  buildChart2()
})
$('#railway_m').click(function () {
  transportNumM =[320, 312, 202, 207, 186]
  transportRateM =[3, 2, 2, 6, 8]
  buildChart2()
})
$('#highSpeedRail_m').click(function () {
  transportNumM =[203, 342, 402, 267, 286]
  transportRateM =[1, 8, 3, 9, 4]
  buildChart2()
})
$('#airporty_m').click(function () {
  transportNumM =[250, 312, 402, 297, 386]
  transportRateM =[3, 4, 2, 7, 5]
  buildChart2()
})
$(".right-box .map-box .map-info  >div").click(function(){
  $(this).children('div').addClass('active');
  $(this).siblings('div').children('div').removeClass('active')
})
